import React, { useEffect, useState } from "react";

const Child = () => {
  useEffect(() => {
    return () => {
      console.log("child unmount");
    };
  }, []);

  return <div>child子组件</div>;
};

// 可以认为useEffect是用来给函数组件使用生命周期的
const App = () => {
  const [count, setCount] = useState(10);
  const [name, setName] = useState("tom");

  // useEffect不需要返回值的
  // 可以只传入一个回调函数, 相当于是componentDidMount和componentDidUpdate
  // 可以传入第二个参数，如果是空数组，那么就相当于componentDidMount

  // 如果第二个参数，不是空数组，那么就相当于是vue里面的watch监听
  // 又可以一次性监听多个值，并且第一次页面加载完成也会执行，所以更准确的说相当于vue3的watchEffect

  // 如果在第一个回调函数里面去return一个函数，那么return的函数就会在销毁的时候调用
  // 相当于componentWillUnmount

  // useEffect(() => {
  //   console.log(123);
  // });

  useEffect(() => {
    console.log(count);
  }, [count]);

  // 请求的时候，第二个空数组一定要加上，不然的话会无限次的做请求
  useEffect(() => {
    fetch("http://www.pudge.wang:3080/api/mapdata")
      .then((response) => response.json())
      .then((res) => {
        console.log(res);
      });
  }, []);

  return (
    <>
      <h2>useEffect</h2>
      <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button>
      <p>name: {name}</p>
      <button onClick={() => setName("jerry")}>btn2</button>
      {count === 10 && <Child />}
    </>
  );
};

export default App;
